﻿if (!window.BootstrapBlazorPrefers) {
    let manager = document.head.querySelector('[colorschemekey]');
    let key = manager.getAttribute('colorschemekey') || 'BootstrapBlazor-Prefers-Color-Scheme';

    window.BootstrapBlazorPrefers = {
        COLOR_SCHEME_KEY: key,
        COLOR_SCHEME_LIGHT: "<link id=\"BootstrapBlazor\" rel=\"stylesheet\" href=\"_content/BootstrapBlazor.Extend/css/bootstrap.blazor.light.min.css\" onload=\"document.documentElement.style.display = ''\">",
        COLOR_SCHEME_DARK: "<link id=\"BootstrapBlazor\" rel=\"stylesheet\" href=\"_content/BootstrapBlazor.Extend/css/bootstrap.blazor.night.min.css\" onload=\"document.documentElement.style.display = ''\">",
        /* 切换色彩模式 */
        switchColorScheme: function (dark) {
            var newIsDark = dark === true || dark === 1 || (typeof (str) == 'string' && dark.toLowerCase() === 'dark');
            var nowIsDark = localStorage.getItem(window.BootstrapBlazorPrefers.COLOR_SCHEME_KEY) === 'dark';

            if (newIsDark == nowIsDark) {
                return;
            }

            localStorage.setItem(window.BootstrapBlazorPrefers.COLOR_SCHEME_KEY, newIsDark ? 'dark' : 'light');
            document.documentElement.style.display = "none";
            document.head.querySelector("[id='BootstrapBlazor']").remove();
            document.head.insertAdjacentHTML("afterbegin", newIsDark
                ? window.BootstrapBlazorPrefers.COLOR_SCHEME_DARK
                : window.BootstrapBlazorPrefers.COLOR_SCHEME_LIGHT);
        },
        judgeWhetherDark: function () {
            const scheme = window.matchMedia('(prefers-color-scheme: dark)');
            switch (localStorage.getItem(window.BootstrapBlazorPrefers.COLOR_SCHEME_KEY)) {
                case 'dark':
                    return true;
                case 'light':
                    return false;
                default:
                    if (scheme.media === 'not all') {
                        return false;
                    } else {
                        return scheme.matches;
                    }
                    break;
            }
        },
    };

    //监听浏览器的颜色模式，进行匹配切换
    window.matchMedia('(prefers-color-scheme: dark)')
        .addEventListener('change', e => {
            //重新判断localStorage里是否设置
            //没有设置则跟随浏览器切换
            var val = localStorage.getItem(window.BootstrapBlazorPrefers.COLOR_SCHEME_KEY);
            if (val !== 'dark' && val !== 'light') {
                document.documentElement.style.display = "none";
                //先移出
                let tag = document.head.querySelector("[id='BootstrapBlazor']");
                tag && tag.remove();

                if (e.matches) {
                    document.head.insertAdjacentHTML("afterbegin", window.BootstrapBlazorPrefers.COLOR_SCHEME_DARK);
                    document.documentElement.style.setProperty('--loading-bg-color', '#343a40');
                } else {
                    document.head.insertAdjacentHTML("afterbegin", window.BootstrapBlazorPrefers.COLOR_SCHEME_LIGHT);
                    document.documentElement.style.setProperty('--loading-bg-color', '#f8f9fa');
                }
            }
        });

    document.documentElement.style.display = 'none';

    //localStorage里正确设置了颜色模式，使用设置的模式
    var color = localStorage.getItem(window.BootstrapBlazorPrefers.COLOR_SCHEME_KEY)
    if (color === 'dark' || color === 'light') {
        if (color === "dark") {
            document.head.insertAdjacentHTML("afterbegin", window.BootstrapBlazorPrefers.COLOR_SCHEME_DARK);
            document.documentElement.style.setProperty('--loading-bg-color', '#343a40');
        } else {
            document.head.insertAdjacentHTML("afterbegin", window.BootstrapBlazorPrefers.COLOR_SCHEME_LIGHT);
            document.documentElement.style.setProperty('--loading-bg-color', '#f8f9fa');
        }
    }
    else {
        //localStorage里未设置时
        if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
            //不支持 prefers-color-scheme 的浏览器默认使用 Light 模式
            document.head.insertAdjacentHTML('afterbegin', window.BootstrapBlazorPrefers.COLOR_SCHEME_LIGHT);
        }
        else {
            //支持的浏览器则 使用浏览器的 颜色模式
            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                document.head.insertAdjacentHTML("afterbegin", window.BootstrapBlazorPrefers.COLOR_SCHEME_DARK);
                document.documentElement.style.setProperty('--loading-bg-color', '#343a40');
            } else {
                document.head.insertAdjacentHTML("afterbegin", window.BootstrapBlazorPrefers.COLOR_SCHEME_LIGHT);
                document.documentElement.style.setProperty('--loading-bg-color', '#f8f9fa');
            }
        }
    }
}
